import React, { PureComponent } from 'react'
import { Row, Col } from 'antd'
import './index.less'
import Utils from '../../Utils/Utils'
import axios from '../../axios/index'

export default class Header extends PureComponent {
  state = {}
  componentWillMount () {
    this.setState({
      userName: 'LingDong'
    })
    setInterval(() => {
      let sysTime = Utils.formateDate(new Date().getTime())
      this.setState({ sysTime })
    }, 1000)
    this.getWeatherAPIData()
    /*  YOaPwUSiTa57hOlgr2YDH1bMPLMwcbsX */
  }
  getWeatherAPIData () {

    let city = '成都';
    axios.jsonp({
      url: 'http://api.map.baidu.com/telematics/v3/weather?location=' + encodeURIComponent(city) + '&output=json&ak=3p49MVra6urFRGOT9s8UBWr2'
    }).then((res) => {
      if (res.status == 'success') {
        let data = res.results[0].weather_data[0];
        this.setState({
          dayPictureUrl: data.dayPictureUrl,
          weather: data.weather
        })
      }
    })
  }

  render () {
    return (
      <div className="header">
        <Row className="header-top">
          <Col span={24}>
            <span>欢迎:{this.state.userName}</span>
            <a href="#">退出</a>
          </Col>
        </Row>
        <Row className="breadcrumb">
          <Col span={4} className="breadcrumb-title">首页</Col>
          <Col span={20} className="weather">
            <span className="date">{this.state.sysTime}</span>
            <span className="weather-img"><img src={this.state.dayPictureUrl} alt="" /></span>
            <span className="weather-datail">{this.state.weather || '占时无法获取天气'}</span>
          </Col>
        </Row>
      </div>
    )
  }
}
